<!-- 库位组件 -->
<template>
  <nut-popup position="bottom" closeable round :style="{ height: '68%' }" @click-close-icon="sendWareHouseMsg"
    v-model:visible="props.showRound">
    <nut-cell title="库位"></nut-cell>
    <nut-searchbar v-model="searchValue" placeholder="请输入仓库名称/仓库代码">
      <template #rightout>
        <IconFont @click="search" name="search2"></IconFont>
      </template>
    </nut-searchbar>
    <nut-radio-group v-model="radioVal">
      <nut-tabs color="#0966ff" style="height:300px" v-model="value" title-scroll direction="vertical">
        <nut-tab-pane v-for="(item, index) in wareHouseList" :pane-key="index" :title="item.warehouseName">
          <template v-slot:default>
            <view class="wareItem" v-for="costItem in item.childHouseList" @click="chooseWareHouse(costItem)">
              <view class="title">
                {{ costItem.warehouseName }}
                <nut-radio :label="costItem.warehouseNo" icon-size="12"></nut-radio>
              </view>
              <view> 仓库代码：{{ costItem.warehouseCode }} &nbsp; 库位：{{ costItem.warehouseNo }}</view>
              <view>级别码：{{ costItem.levelCode }}</view>
            </view>
            <nut-empty v-if="emptyShow" description="无数据请重新搜索"></nut-empty>
          </template>
        </nut-tab-pane>
      </nut-tabs>
    </nut-radio-group>
    <nut-button block type="primary" color="#0966ff" @click="sendWareHouseMsg">确定</nut-button>
  </nut-popup>
</template>

<script setup lang="ts">
import { onMounted, defineComponent, getCurrentInstance, reactive, ref } from 'vue';
import { Search2 } from '@nutui/icons-vue-taro';
import { getWarehouse } from "@/@api/wait"; // 待确认接口

import Taro from '@tarojs/taro';
import { IconFont } from '@nutui/icons-vue-taro';


const props = defineProps<{
  showRound: boolean
}>()

const emit = defineEmits(['sendWareHouseMsg'])

onMounted(() => {
  initWarehouse(); // 获取库位信息
})

const searchValue = ref(''); // 搜索关键词



const value = ref('0');
const wareHouseList = ref([]);
const emptyShow = ref(false); // 无数据初始化

async function initWarehouse() {
  let params = {
    companyNo: Taro.getStorageSync('btStaff').branchCompanyNo,
    send: true,
    keyWord: searchValue.value,
  }
  const res = await getWarehouse(params);
  wareHouseList.value = res.data.data;
  if (res.data.data[0].childHouseList == 0) {
    console.log('子仓库无数据')
    emptyShow.value = true
  }
  // console.log(res, 'res')
}

function search() {
  wareHouseList.value = []; // 置空
  initWarehouse();
}

const radioVal = ref(''); // 选中的
const chooseWareHouseInfo = ref(); // 选中的radio信息
function chooseWareHouse(item) {
  chooseWareHouseInfo.value = item;
  radioVal.value = item.warehouseNo; // 库位
}

// 传递选择的库位信息给父组件
function sendWareHouseMsg() {
  emit('sendWareHouseMsg', chooseWareHouseInfo.value || ''); // 关闭弹窗传递数据
}

</script>

<style lang="scss">
.nut-tabs.vertical .nut-tabs__titles-item.active .nut-tabs__titles-item__line {
  left: 0rpx;
  width: 6rpx;
  background: #0966ff;
}

.nut-cell {
  margin: 0;
}

.nut-tab-pane {
  padding: 0;
}

.wareItem {
  width: 550rpx;
  padding: 20rpx;
  box-sizing: border-box;
  border-bottom: 1rpx solid #f0f0f0;
  color: #666;
  font-size: 22rpx;
  margin: 0 auto;

  .title {
    color: #252525;
    font-size: 28rpx;
    margin-bottom: 4rpx;
    font-weight: bold;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .content {}
}
</style>